<template>
	<view class="reportdetail">
		<view class="flex_row_between_center">
			<view class="flex_row_start_center">
				<image v-if="info.member" :src="info.member.memberAvatar" mode="aspectFill" class="reportdetail_image"></image>
				<view class="reportdetail_top"  v-if="info.member">
					<view>{{info.member.memberName}}</view>
					<view>{{$changeTime(info.createTime)}}</view>
				</view>
			</view>
			<!-- <view class="reportdetail_follow flex_row_start_center">
				<uni-icons type="plusempty" size="14" color="#9ad5dc"></uni-icons>
				<view>关注</view>
			</view> -->
		</view>
		<view class="reportdetail_html">
			<view style="font-weight: 700;">{{info.title}}</view>
			<view style="margin-bottom: 24rpx;">{{info.content}}</view>
			<view  v-if="info.picture">
				<view v-if="info.picture && info.picture.split(',').length==2" class="images_box flex_row_between_center" >
						<image v-for="(item,index) in info.picture.split(',')" i :key="index" class="reportdetail_html_image2" mode="aspectFill" :src="item" ></image>
				</view>
				<view v-else-if="info.picture && info.picture.split(',').length>=3" class="images_box " >
						<image v-for="(item,index) in info.picture.split(',')" i :key="index" class="reportdetail_html_image3" mode="aspectFill" :src="item" ></image>
				</view>
				<image v-else class="reportdetail_html_image" mode="widthFix" :src="info.picture" ></image>
			</view>
			<view v-if="info.postType==3">
				<view  class="post_options">
					<view 
						v-for="(item,index) in info.discussPostOptionList" 
						:key="index"
						:class="[currentIndex ==index ? 'se_c':'','post_option']"
						@click="changeOption(item,index)"
						>
						<text>{{item.optionsName}}.</text>
						<text>选项{{item.optionsName}}</text>
					</view>
				</view>
			   <view class="post_option_content" v-if="currentIndex !=null">
				   <view class="post_option_content_t">选项解读</view>
				   <view >选项{{currentContent.optionsName}}.{{currentContent.optionsDetail}}</view>
			   </view>
			</view>
		</view>
		<view class="comment">
			<view class="flex_row_between_center">
				<view class="comment_title">最新评论({{commentList.length}})</view>
				<view class="comment_button">
					<text class="comment_button_selected">推荐</text>
					<text>最新</text>
				</view>
			</view>
			<view v-if="commentList&& commentList.length==0" class="no_commentlist">
				<text>暂无评论</text>
			</view>
		    <view v-if="commentList&& commentList.length>0">
				<view class="comment_list flex_row_start_start" v-for="(item,index) in commentList " :key="index">
					<image class="comment_list_image1" :src="item.user.memberAvatar" mode="aspectFill"></image>
					<view class="comment_list_r">
						<view class="flex_row_between_center comment_list_r_1">
							<view>{{item.user.memberNickName}}</view>
							<view @click="postAd(item)">
								<uni-icons v-if="item.likeStatus==1" type="hand-up-filled" size="20" color="#9ad5dc"></uni-icons>
								<uni-icons  v-if="item.likeStatus==0" type="hand-up" size="20"></uni-icons>
							</view>
						</view>
						<view class="comment_list_r_2">{{item.comment.content}}</view>
						<view class="flex_row_start_center comment_list_r_3">
							<view>{{$changeTime(item.comment.createTime)}} </view>
							<view @click="inputFocus2(item)">回复</view>
						</view>
						<view v-if="item.replys.length >0" class="comment_list2"  >
							<view v-for="(value,idx) in item.replys" :key="idx" style="margin-top: 22rpx;">
								<view class="flex_row_between_center">
									<view class="flex_row_start_center">
										<image class="comment_list_image2" :src="value.user.memberAvatar" mode="aspectFill"></image>
										<view>{{value.user.memberNickName}}</view>
									</view>
									<view  @click="postAdd(value)">
										<!-- <uni-icons type="hand-up" size="16" color="#9ad5dc"></uni-icons> -->
										<uni-icons v-if="value.likeStatus==1" type="hand-up-filled" size="20" color="#9ad5dc"></uni-icons>
										<uni-icons  v-if="value.likeStatus==0" type="hand-up" size="20"></uni-icons>
										<!-- <view v-if="info.likeCount>0">{{info.likeCount}}</view> -->
									</view>
									
								</view>
								<view class="comment_list_r_2">{{value.reply.content}}</view>
								<view class="flex_row_start_center comment_list_r_3">
									<view>{{$changeTime(value.reply.createTime)}} </view>
									<!-- <view @click="inputReplay(value)">回复</view> -->
								</view>
							</view>
							<!-- <view class="comment_list2_tip" >
								<view>
									<text>查看全部{{item.replys.length}}回复</text>
									<uni-icons type="down" size="10"  color="#9ad5dc"></uni-icons>
								</view>
								<view>
									<text>收起</text>
									<uni-icons type="up" size="10"  color="#9ad5dc"></uni-icons>
								</view>
							</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="isInput" class="reportdetail_button flex_row_between_center">
			<input class="reportdetail_input" :value="form.content" @input="inputFn" @blur="inputBlur" adjust-position="true" placeholder="期待有爱的评论~~" placeholder-class="placeholder" />
			<view class="reportdetail_input_r" @click="submitFn">发送</view>
		</view>
		<view v-else class="reportdetail_button flex_row_between_center">
			<view class="reportdetail_button_l"  @click="inputFocus">期待有爱的评论~~</view>
			<view class="flex_row_between_center" >
				<view class="reportdetail_button_icon" @click="addArticle()">
					<uni-icons v-if="info.likeStatus==1" type="hand-up-filled" size="30" color="#9ad5dc"></uni-icons>
					<uni-icons  v-if="info.likeStatus==0" type="hand-up" size="30"></uni-icons>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	export default{
		data(){
			return{
				html:'#每日测试TA并不是你的良人。现阶段对于你们来说是很重要的转折点，也许你们正面临着是否要正式交往、是否要结婚、是否要分手的阶段，你们两人都还望着远方，想想未来生活可能的模样。然而彼此却迟迟无法达成共识，你们想要的方向不一样，或是他还没准备好给你承诺，对于你来说，此时也许还陷在泥沼左右为难。现在的他也许不适合你，因为你们之间没有人愿意先退让一步。',
				info:{},
				isInput:false,
				form:{
                  entityType: '',
                  entityId: '',
                  targetId: '',
                  status: 0,
                  content: '',
                },
				mainBodyId:'',
				commentList:[],
				currentIndex:null,
				currentContent:null,
			}
		},
		onLoad(options){
			if ('params' in options) {
			      let obj = JSON.parse(decodeURIComponent(options.params));
				  console.log(obj,'oooooooooooo');
				  this.getInfo(obj.id)
				 
			 }
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'userCenterData'])
		},
		methods:{
			getInfo(id){
				let param = {};
				param.data={}
				param.data.discussPostId=id
				param.data.memberId=this.userCenterData.memberId
				param.url='v3/discuss/front/detail'
				
				this.$request(param).then(res=>{
					console.log(res);
					if(res.state==200){
						this.info=res.data
						this.commentList=res.data.commentVoList
						this.getRecord(id)
					}
				})
			},
			/* 新增浏览记录 */
			getRecord(id){
				let param = {};
				param.data={}
				param.data.postId=id
				param.url='v3/brow/front/history/add'
				
				this.$request(param).then(res=>{
					console.log(res);
					if(res.state==200){
						console.log(res.msg);
					}
				})
			},
			/* 点赞 */
			addArticle(){
					if(!this.hasLogin){
						this.$modal.msg('请登录之后在点赞！')
						return false
					}
					//帖子点赞
					let data={}
					data.entityType='1'
					data.entityId=this.info.discussPostId
					data.entityUserId=this.info.member.memberId
					data.postId=this.info.discussPostId
					console.log(data);
					let param = {};
					param.url='v3/like/front/add'
					param.data=data
					param.header={
						'Content-Type': 'application/json;charset=utf-8',
					}
					this.$request(param).then(res=>{
						// console.log(res);
						this.getInfo(this.info.discussPostId)
					})
					
			},
			/* 点赞评论 第一级 */
			postAd(value){
				console.log(value);
				let data={}
				data.entityType='2'
				data.entityId=value.comment.id
				data.entityUserId=value.comment.memberId
				data.postId=this.info.discussPostId
				let param = {};
				param.url='v3/like/front/add'
				param.data=data
				param.header={
					'Content-Type': 'application/json;charset=utf-8',
				}
				this.$request(param).then(res=>{
					// console.log(res);
					this.getInfo(this.info.discussPostId)
				})
			},
			// 点赞评论
			postAdd(value){
				console.log(value);
				let data={}
				data.entityType='2'
				data.entityId=value.reply.id
				data.entityUserId=value.reply.memberId
				data.postId=this.info.discussPostId
				let param = {};
				param.url='v3/like/front/add'
				param.data=data
				param.header={
					'Content-Type': 'application/json;charset=utf-8',
				}
				this.$request(param).then(res=>{
					// console.log(res);
					this.getInfo(this.info.discussPostId)
				})
			},
			
			inputFocus(){
				if(!this.hasLogin){
					this.$modal.msg('请登录之后在评论！')
					return false
				}
				this.isInput=true
				this.form.entityType=1
				this.form.entityId=this.info.discussPostId
				this.form.targetId=this.info.memberId
				this.form.status=0
				this.mainBodyId=this.info.discussPostId
			},
			/* 评论的评论 */
			inputFocus2(item){
				
				this.isInput=true
				this.form.entityType=2
				this.form.entityId=item.comment.id
				this.form.targetId=item.user.memberId
				this.form.status=0
				this.mainBodyId=this.info.discussPostId
			},
			inputReplay(value){
				console.log(value);
				this.isInput=true
				this.form.entityType=2
				this.form.entityId=value.reply.id
				this.form.targetId=value.user.memberId
				this.form.status=0
				this.mainBodyId=this.info.discussPostId
			},
			inputBlur(){
				// this.isInput=false
			},
			inputFn(e){
				this.form.content=e.detail.value
			},
			/* 评论帖子主体 */
			submitFn(){
				if(!this.form.content){
					return false
				}
				
				let param = {};
				param.url='v3/comment/front/add/'+this.mainBodyId
				param.data=this.form
				param.method="post"
				param.header={
					'Content-Type': 'application/json;charset=utf-8',
				}
				this.$request(param).then(res=>{
					console.log(res);
					if(res.state==200){
						this.getReset()
						this.getInfo(this.info.discussPostId)
					}
				})
			},
			getReset(){
				this.form={
                  entityType: '',
                  entityId: '',
                  targetId: '',
                  status: 0,
                  content: '',
                }
			},
			changeOption(item,index){
				this.currentIndex=index
				console.log(item);
				this.currentContent=item
			},
		}
	}
</script>

<style>
	page{
		background-color: #fff;
		padding: 0 10rpx ;
	}
</style>
<style lang="scss" scoped>
	
	
	.reportdetail{
		padding-bottom: 98rpx;
	}
	
	.reportdetail_image{
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		margin-right: 24rpx;
	}
		
	.reportdetail_top{
		
		& view:first-child{
			font-size: 26rpx;
			margin-bottom:4rpx;
		}
		& view:last-child{
			font-size: 20rpx;
			color: #c8c8c8;
		}
	}
	.reportdetail_follow{
		border: 2rpx solid #9ad5dc;
		border-radius: 30rpx;
		color: #9ad5dc;
		padding: 8rpx 24rpx;
	}
	.reportdetail_html{
		padding: 10rpx 16rpx;
		margin-top: 24rpx;
		font-size: 26rpx;
		line-height: 46rpx;
		// background-color: yellow;
	}
	.reportdetail_html_image{
		width: 700rpx;
		border-radius: 30rpx;
	}
	.images_box{
		// width: 350rpx;
		display: flex;
		flex-wrap: wrap;
		// background-color: red;
	}
	.reportdetail_html_image2{
		width: 340rpx;
		height: 220rpx;
		border-radius: 30rpx;
		margin-right: 19rpx;
		margin-bottom: 14rpx;
		&:nth-child(2n){
			margin-right: 0;
		}
	}
	.reportdetail_html_image3{
		width: 220rpx;
		height: 220rpx;
		border-radius: 30rpx;
		margin-right: 19rpx;
		margin-bottom: 14rpx;
		&:nth-child(3n+3){
			margin-right: 0;
		}
	}
	.reportdetail_button{
		position: fixed;
		width: 750rpx;
		height: 88rpx;
		bottom: 0;
		left: 0;
		background-color: #fff;
		padding: 0 36rpx 0 32rpx;
	}
	.reportdetail_button_l{
		background-color: #f7f7f7;
		padding: 18rpx 24rpx;
		border-radius: 30rpx;
		margin-right: 34rpx;
		width: 540rpx;
	}
	.reportdetail_button_icon{
		position: relative;
		// background-color: red;
		& view{
			position: absolute;
			right: -15rpx;
			top: -10rpx;
			color: #61cfec;
		}
	}
	.reportdetail_input{
		height: 66rpx;
		padding-left: 32rpx;
		border-radius: 15rpx;
		background-color: #f7f7f7;
		width: 80%;
	}
	.reportdetail_input_r{
		background-image: linear-gradient(to right ,#70ebfd,#61cfec);
		color: #fff;
		padding: 10rpx 32rpx;
		border-radius: 24rpx;
	}
	.placeholder{
		font-size: 22rpx;
	}
	
	.comment{
		margin-top: 32rpx;
		padding: 0 20rpx;
		
	}
	.comment_title{
		font-weight: bold;
		font-size: 26rpx;
	}
	.comment_button{
		& text{
			width: 80rpx;
			display: inline-block;
			text-align: center;
			color: #afafaf;
		}
	}
	.comment_button_selected{
		color: #000 !important;
	}
	.no_commentlist{
		padding: 80px 20px;
		text-align: center;
		font-size: 28rpx;
		color: #afafaf;
	}
	.comment_list{
		margin-top: 32rpx;
	}
	.comment_list_r{
		flex: 1;
	}
	.comment_list_image1{
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		margin-right: 32rpx;
		// background-color: red;
	}
	.comment_list_r_1{
		margin-bottom: 10rpx;
	}
	.comment_list_r_2{
		margin-bottom: 10rpx;
		font-size: 24rpx;
	}
	.comment_list_r_3{
		color: #b8b8b8;
		font-size: 22rpx;
		
		& view:last-child{
			margin-left: 10rpx;
			color: #6fb7bf;
		}
	}
	
	.comment_list2{
		margin-top: 24rpx;
		padding: 16rpx 18rpx 24rpx 18rpx;
		background-color: #f7f7f7;
	}
	.comment_list_image2{
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		margin-right: 22rpx;
	}
	
	.comment_list2_tip{
		color: #91cedc;
		margin-top: 15rpx;
		font-size: 20rpx;
	}
	
	/* 选项 */
	.post_options{
		display: flex;
		flex-wrap: wrap;
		padding: 4px 20px;
		
	}
	.post_option{
		width: 48%;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		margin-bottom: 10px;
		border: 2rpx solid #f6f6f6;
		border-radius: 40rpx;
		&:nth-child(2n+1){
			margin-right: 4%;
		}
		&:nth-child(2n){
			margin-right: 0;
		}
		// &:nth-child(n > 2){
		// 	margin-bottom: 0;
		// }
		
		&  text:first-child{
			color: #61cfec;
			margin-right: 10rpx;
		}
		&  text:last-child{
		   font-size: 26rpx;
		}
	}
	.post_option_content{
		width: 100%;
		background-color: #f7f7f7;
		padding: 14px;
		border-radius: 10px;
		font-size: 26rpx;
		color: #9d9d9d;
	}
	.post_option_content_t{
		color: #8bf0e8;
		text-align: center;
	}
	.se_c{
		color: #b1dfe4;
		border: 2rpx solid #b1dfe4;
	}
	
</style>